<template>
	<div style="width: 99%;padding-left: 1%; overflow: hidden !important;">
		<div v-if="headerSetting" style="float: right;margin-bottom: -50px;margin-right: 10px;position: relative;z-index: 10;">
			<el-popover trigger="hover" placement="top" width="auto">
				<template #default>
					<div class="popSettingClass" :style="'max-height:'+(tableHeight-70)+'px;min-height:'+(tableHeight-210)+'px;'">
						<el-row v-for="item in ctrlColumns" :key="item.property">
							<el-col :span="16">
								<span style="margin-top: 30px;">{{ item.label || item.name }}</span>
							</el-col>
							<el-col :span="8">
								<el-switch
									v-model="item.show"
									class="ml-2"
									style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
									@change="ctrlColumnsChange"
									:active-value="true"
									:inactive-value="false"
								/>
							</el-col>
						</el-row>
					</div>
				</template>
				<template #reference>
					<el-button size="small" icon="el-icon-setting"
							   style="width: 20px;margin: 5px 10px 10px 0;"></el-button>
				</template>
			</el-popover>
		</div>
		<div class="divtable" v-loading="loading">
			<div v-if="tablename" class="DueTableTop">
					<div v-if="iconname==''" style="height: 100%;width: 100%;margin-bottom: -10px;height: 44px;">
						<div style="margin-left: 15px;float: left;margin-top: 5px;">
							<img class="cardtopblockimg" src="img/technolg.png"/>
						</div>
						<div style="float: left;font-size: 14px;font-weight: 400;margin-left: 20px;
						margin-top: 12px;color: rgb(72, 74, 77);color: rgb(72, 74, 77)">
							<p>{{ tablename }}</p>
						</div>
					</div>
					<div v-else style="height: 100%;width: 100%;margin-bottom: -10px;height: 44px;">
						<el-icon class="cardtopblockimgNew">
							<component :is="iconname"/>
						</el-icon>
						<div style="float: left;font-size: 14px;font-weight: 400;margin-left: 10px;
						margin-top: 12px;color: rgb(72, 74, 77);color: rgb(72, 74, 77)">
							<p>{{ tablename }}</p>
						</div>
					</div>
				</div>
			<el-table :key="elk" :data="records" ref="table"
					:size="size"
					:border="border"
					:stripe="stripe"
					:height="height!==null?height:this.tableHeight"
					sum-text="&nbsp;"
					:max-height="maxHeight?maxHeight:null"
					:table-layout="tableLayout"
					@selection-change="selectionChange"
					style="width:100%;margin:0 0 0.2% 0;height:99%;"
					:class-name="'detailtableclass'"
					:row-style="isSelect"
					:row-class-name="rowClassName"
			>
			<!--:cell-class-name="addClass"  :show-summary="showSummary"
					:summary-method="summaryMethod"
					:height="height!==null?height:this.tableHeight"
					-->
				<template v-if="selection">
					<el-table-column
						v-if="selectionType==='radio'"
						label=""
						width="35">
						<template #default="scope">
							<el-radio v-model="radioValue" :key="scope.row.id" :label="scope.row.id"
									@click="multipleSelection[0]=scope.row" style="padding-left: 3px;">&nbsp;
							</el-radio>
						</template>
					</el-table-column>
					<el-table-column v-if="selectionType==='checkbox'" type="selection" width="40" :selectable="checkboxInit"/>
				</template>
				<template v-for="(column,index) in ctrlColumns" :key="column.property+'_'+index">
					<el-table-column v-if="column.show"
									:prop="column.property"
									:label="column.label||column.name"
									:align="column.align?column.align:'center'"
									:sortable="column.sortable?column.sortable:false"
									:column-key="column.property+'_'+index"
									:show-overflow-tooltip="column.tooltiphide?false:true"
									:fixed="column.fixed"
									:formatter="this.formatter"
									:width="column.width?column.width:null"
									:class-name="getcolumnclass(column)"

					>
					</el-table-column>
				</template>
			</el-table>

			<div v-if="false" class="tablesummary">
				<div v-for="opt in tjsl" :key="opt.key" style="float:left;margin-left: 10px">
					{{opt.key+":"+opt.value}}
				</div>
			</div>
			<el-pagination ref="pagination" v-if="pagination"
						   v-model:current-page="pageForm.current"
						   v-model:page-size="pageForm.pageSize"
						   :page-sizes="[30,50,100]"
						   :small="true"
						   :hide-on-single-page="hideOnSinglePage"
						   background
						   layout="->,prev, pager, next, jumper, sizes, total"
						   :total="total"
						   :pager-count="5"
						   @size-change="handleSizeChange"
						   @current-change="handleCurrentChange"
						   style="height:30px;margin: 0 0 5px 0;padding: 5px 10px 5px 0;border: 1px solid;border-color: rgba(231,228,228,0.69);border-left:0px #f6f6f6 solid;">
			</el-pagination>

		</div>
	</div>
</template>

<script>

import i18n from "@/locales";
import http from "@/utils/request";
import tool from "@/utils/tool";
import Sortable from "sortablejs";
import {h} from "vue";
import {ElButton, ElContainer, ElForm, ElIcon, ElMain, ElTag} from "element-plus";
import { Alert } from "@arco-design/web-vue";

export default {
	name: "exTable",
	props: {
		id: {type: String, default: null},
		stripe: {type: Boolean, default: true},
		border: {type: Boolean, default: true},
		selection: {type: Boolean, default: true},
		selectionType: {type: String, default: 'checkbox'},
		pagination: {type: Boolean, default: true},
		height: {type: Number, default: null},
		minHeight: {type: Number, default: 210},
		maxHeight: {type: Number, default: null},
		minRow: {type: Number, default: 0},
		tableLayout: {type: String, default: 'fixed'},//fixed,auto
		size: {type: String, default: "default"},//large / default /small
		url: {type: String, default: null},//数据加载的url
		refs: {type: Object, default: null},//引用组件的引用对象
		search: {type: String, default: null},//查询组件的名称
		columns: {type: Array, default: null},
		drag: {type: Boolean, default: false},
		params: {type: Object, default: {}},
		headerSetting: {type: Boolean, default: false},
		headerDrag: {type: Boolean, default: false},
		warningRow: {type: Boolean, default: false},
		autoRefresh: {type: Boolean, default: true},
		checkboxInit: {type:Function ,default:null},
		hideOnSinglePage: {type: Boolean, default: false},
		tabletype: {type: String, default: ''},//fixed,auto
		tablename: {type: String, default: ''},//fixed,auto
		iconname: {type: String, default: ''},//fixed,auto
		pageSize: {type: Number, default: 30},//传入分页页数，首页待办使用
		headerRow: {type: Boolean, default: false},
	},
	components: {},
	data() {
		return {
			elk: tool.uuid("elk"),
			loading: false,
			showSummary: false,
			multipleSelection: [],
			ctrlColumns: [],
			summaryColumns: [],
			pageForm: {
				current: 1,
				pageSize: 30,
			},
			total: 0,
			records: [],
			dragging: false,
			tableHeight: null,
			storeParams: {},
			radioValue: null,
			formatLabels:{},
			columnGroups:[],
			tjsl:[
				{key:"数量",value:1001},
				{key:"资产原值",value:10000000},
			]
		}
	},
	watch: {},
	computed:{
		menuCode:function(){
			let breadcrumb = this.$router.currentRoute.value.meta.breadcrumb;
			return breadcrumb[breadcrumb.length-1].code;
		},
		btnPermissions:function(){
			return this.$TOOL.data.get("PERMISSIONS");
		},
	},
	created() {
		this.processCtrlColumns();
	},
	mounted() {
		if (this.headerDrag) {
			this.columnDrop();
		}

		if (!this.drag) {
			if (this.autoRefresh) {
				this.refresh();
			}
			this.resetTableHeight();
		}
    this.$emit('onMounted');
	window.addEventListener("resize", this.resetTableHeight);
	},
	beforeMount() {
		this.$cache.data.loadColumnGroups().then(result=>{
			this.columnGroups=result;
		});
	},
	beforeUnmount() {
		window.removeEventListener("resize", this.resetTableHeight);
	},
	methods: {
		getcolumnclass(column){
			if(column.name!=null){
				if(column.name!=undefined){
					if((column.name.indexOf("编码")>-1 || column.name.indexOf("名称")>-1) && column.click){
						return '';
					}else
					if((column.name.indexOf("管理人")>-1 || column.name.indexOf("盘点人")>-1)){
						return 'stockuser';
					}
				}
			}

			return '';
		},
		resetTableHeight() {
			let h = 15;
			if (this.pagination && this.$refs.pagination) {
				h += 30;
			}
			if(this.tablename){
				h += 56;
			}

			if(this.headerRow){
				h += 100;
			}
			//alert(this.minHeight);
			let height = this.$parent.$el.clientHeight - h;

			if (height <= this.minHeight) {
				this.tableHeight = this.minHeight;
			} else {
				this.tableHeight = height;
			}

			if(this.tabletype==="detail"){
				this.tableHeight = this.minHeight;
				//height = this.$parent.$parent.$el.clientHeight - h;
				if(this.total>this.minRow){
					this.tableHeight = null;
				}
			}

		},
		ctrlKey() {
			let userInfo = this.$TOOL.data.get("USER_INFO");
			let key = "CTRL_COLUMNS_" + userInfo.id + "_" + this.id;
			return key;
		},
		/**
		 * 列拖拽
		 */
		columnDrop() {
			const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
			this.sortable = Sortable.create(wrapperTr, {
				animation: 180,
				delay: 0,
				onStart: () => {
					let hasNoShow = false;
					this.ctrlColumns.forEach(item => {
						if (!item.show) {
							hasNoShow = true;
						}
					})
					if (hasNoShow) {
						this.$confirm(this.$t("common.ex_table_ctrl_column_drag"), this.$t("common.tip"), {
							type: 'warning',
						}).then(() => {
							this.ctrlColumns.forEach(item => {
								item.show = true;
							})
							this.$TOOL.data.set(this.ctrlKey(), this.ctrlColumns);
						}).catch(() => {
							//取消
						})
					}
				},
				onEnd: (evt) => {
					let empty = 0;
					if (this.selection) {
						empty = 1;
					}
					if (evt.oldIndex < empty || evt.newIndex < empty) {
						// 复原拖拽之前的 dom
						const tagName = evt.item.tagName;
						const items = evt.from.getElementsByTagName(tagName);
						if (evt.oldIndex > evt.newIndex) {
							evt.from.insertBefore(evt.item, items[evt.oldIndex + 1]);
						} else {
							evt.from.insertBefore(evt.item, items[evt.oldIndex]);
						}
						return;
					}

					// // 跳过显示的列数量，如开头我们用了一个多选框，h和序号
					const oldItem = this.ctrlColumns[evt.oldIndex - empty];
					this.ctrlColumns.splice(evt.oldIndex - empty, 1);
					this.ctrlColumns.splice(evt.newIndex - empty, 0, oldItem);
					this.reDrawTable();
					// 每一次拖拽后都要重绘一次

					if (this.id) {
						this.$TOOL.data.set(this.ctrlKey(), this.ctrlColumns);
					}
				},
			});
		},
		/**
		 * 触发表格重绘
		 */
		reDrawTable() {
			this.$nextTick(() => {
				this.columnDrop();
			});
		},
		processCtrlColumns() {
			//设置属性，兼容动态拖拽的字段
			this.columns.forEach(item =>{
				if (!item.property) {
					item.property = item.code;
				}
			});

			if (this.id && !this.drag && (this.headerSetting || this.headerDrag)) {
				let data = this.$TOOL.data.get(this.ctrlKey());
				if (data) {
					//只保留是否显示属性和编码属性，其它属性更新最新配置
					let reserveCodes = {};
					let reserveDatas = [];
					data.forEach(item => {
						if (!reserveCodes[item.property]) {
							reserveCodes[item.property] = true;
							let newItem = {show: item.show, code: item.code,property:item.property};
							reserveDatas.push(newItem);
						}
					});

					//更新成配置的列
					this.columns.forEach(item => {
						let hasItem = false;
						reserveDatas.forEach(col => {
							if (col.property === item.property) {
								hasItem = true;
								Object.assign(col, item);
							}
						});
						if (!hasItem) {
							item.show = true;
							reserveDatas.push(item);
						}
					});

					//从缓存中过滤出不存在的列
					let existItems = [];
					reserveDatas.forEach(item => {
						this.columns.forEach(col => {
							if (col.property === item.property) {
								existItems.push(item);
							}
						});
					});
					this.ctrlColumns = existItems;
				} else {
					this.columns.forEach(item => {
						item.show = true;
						this.ctrlColumns.push(item);
					});
				}

				this.$TOOL.data.set(this.ctrlKey(), this.ctrlColumns);
			} else {
				this.columns.forEach(item => {
					item.show = true;
					this.ctrlColumns.push(item);
				});
			}
			this.ctrlColumns = this.ctrlColumns.filter(item => item.buttonAreaVisible !== false);
			//统计需要合计的列
			this.ctrlColumns.forEach(item => {
				if (item.summary) {
					this.showSummary = true;
					this.summaryColumns.push(item);


				}

			});
		},
		ctrlColumnsChange() {
			this.$TOOL.data.set(this.ctrlKey(), this.ctrlColumns);
		},
		summaryMethod({columns, data}) {
			const sums = [];
			if (columns.length > 0) {
				columns.forEach((column, index) => {
					this.summaryColumns.forEach(summaryColumn => {
						if (summaryColumn.property === column.property) {
							let strs = summaryColumn.property.split(".");
							let values = data.map((item) => {
								let value = item
								for (var i = 0; i < strs.length; i++) {
									value = value[strs[i]];
									if (!value) {
										break;
									}
								}
								return Number(value)
							});
							if (!values.every((value) => isNaN(value))) {
								let total = values.reduce((prev, curr) => {
									const value = Number(curr);
									if (!isNaN(value)) {
										return Number(prev) + Number(curr);
									} else {
										return Number(prev);
									}
								}, 0);
								total = parseFloat(total).toFixed(2);
								this.columns.forEach(item => {
									if (item.property === column.property && item.formatter === 'MONEY') {
										total = this.$TOOL.format.fenToYuan(total);
									}
								});
								sums[index] = this.$TOOL.groupSeparator(total);
							}
						}
					});
				});
			}
			return sums;
		},
		selectionChange(val) {
			this.$emit('checkClick',  val.length);
			this.multipleSelection = val;
		},
		isSelect({ row }) {
			const checkIdList = this.multipleSelection.map((item) => item.id);
			if (checkIdList.includes(row.id)) {
				return {
				//backgroundColor: "#DAE4FD",
				backgroundColor:"#EDEDED",
				};
			}else{
				return {
				backgroundColor: "#fff",
				};
			}
		},

		handleSizeChange(pageSize) {
			this.pageForm.pageSize = pageSize;
			this.refresh();
		},
		handleCurrentChange(currentPage) {
			this.pageForm.current = currentPage;
			this.refresh();
		},
		pageParams() {
			if (this.pagination) {
				return this.pageForm;
			} else {
				return {};
			}
		},
		selections() {
			return this.multipleSelection;
		},
		dataRecords() {
			return this.records;
		},
		selectionOne() {
			if (this.multipleSelection.length === 0) {
				this.$message.warning(i18n.global.tc("common.please_select_data"));
				return;
			}
			if (this.multipleSelection.length > 1) {
				this.$message.warning(i18n.global.tc("common.select_one_error"));
				return false;
			} else {
				return this.multipleSelection[0];
			}
		},

		async setTableData(data) {
			this.pageForm.current = data.current;
			this.pageForm.pageSize = data.size;
			this.total = data.total;
			this.resetTableHeight();
			let oriRecords = data.records || data; //支持分页和不分页
			if (this.ctrlColumns.length === 0 || oriRecords.length === 0) {
				this.records = oriRecords;
				this.loading = false;
				//释放搜索组件的loading状态
				if (this.search && this.refs && this.refs[this.search]) {
					this.refs[this.search].setLoading(false);
				}
				return;
			}

			this.columns.forEach(column=>{
				column["_processFinish"] = 0;
			});

			let formatLimitCount = oriRecords.length;

			for (let column of this.columns) {
				if (column.formatter === 'DICT') {
					for (let row of oriRecords) {
						if (column["_processFinish"] < formatLimitCount) {
							let value = this.getValue(column.property, row);
							let formatKey = column.key + "_" + value;
							row["_" + column.property] = formatKey;
							if (this.formatLabels[formatKey]) {
								column["_processFinish"] = column["_processFinish"] + 1;
								this.setRealTableData(oriRecords, formatLimitCount);
							} else {
								let label = await this.$cache.dic.label(column.key, value, true,true);
								let formatLabel = label;
								/* 去掉颜色
								if (label && !label.type) {
									formatLabel = h(ElTag, {
										size: 'small',
										style: "color:#409effF2;background-color: #409eff0D;border: #409eff"
									}, {default: () => label});
								}
								*/
								//缓存已处理格式化内容
								this.formatLabels[formatKey] = formatLabel;
								column["_processFinish"] = column["_processFinish"] + 1;
								this.setRealTableData(oriRecords, formatLimitCount);
							}
						}
					}
				}else if(column.formatter === 'CHANGE_INFO'){
					for (let row of oriRecords) {
						if (column["_processFinish"] < formatLimitCount) {
							let value = row[column.property];
							let content = "";
							for (let prop in value) {
								for(let group of this.columnGroups){
									for(let item of group.items){
										if (item.pathCode.includes('0000004')&&(item.dynamicCode + "." + item.code === prop || item.code === prop)) {
											if(value[prop].before||value[prop].after){
												let before = "";
												if(value[prop].before){
													before = value[prop].before;
													if(item.dataSourceCode){
														before = await this.$cache.dic.label(item.dataSourceCode, before, false,true);
													}
													if(item.widgetType==='date'){
														before = tool.format.convert(before, "DATE", null);
													}
													if(item.widgetType==='datetime'){
														before = tool.format.convert(before, "DATETIME", null);
													}
												}
												let after = "";
												if(value[prop].after){
													after=value[prop].after;
													if(item.dataSourceCode){
														after = await this.$cache.dic.label(item.dataSourceCode, after, false,true);
													}
													if(item.widgetType==='date'){
														after = tool.format.convert(after, "DATE", null);
													}
													if(item.widgetType==='datetime'){
														after = tool.format.convert(after, "DATETIME", null);
													}
												}
												if(before===''){
													content=content+""+item.name+" 更改为 '"+after+"'; ";
												}else if(after===''){
													content=content+""+item.name+" 从 '"+before+"' 更改为'无'; ";
												}else{
													content=content+""+item.name+" 从 '"+before+"' 更改为'"+after+"'; ";
												}
											}
										}
									}
								}
							}
							// let label = h("div", {}, {default: () => content});
							let label = content;

							let formatKey = column.key + "_" + tool.uuid("cache");
							row["_" + column.property] = formatKey;
							this.formatLabels[formatKey] = label;
							column["_processFinish"] = column["_processFinish"] + 1;
							this.setRealTableData(oriRecords, formatLimitCount);
						}
					}

				} else {
					column["_processFinish"] = formatLimitCount;
					this.setRealTableData(oriRecords, formatLimitCount);
				}
			}
		},
		setRealTableData(processData, formatLimitCount) {

			if (this.columns.filter(item => item["_processFinish"] !== formatLimitCount).length === 0) {

				this.records = processData;
				this.loading = false;
				//释放搜索组件的loading状态
				if (this.search && this.refs && this.refs[this.search]) {
					this.refs[this.search].setLoading(false);
				}
				this.$nextTick(() => {
					if (this.$refs.table) {
						this.$refs.table.doLayout();
					}
				});
			}
		},
		getValue(property, row) {
			let nodes = property.split(".");
			let objValue = null;
			for (const node of nodes) {
				let tempValue = null;
				if (objValue) {
					tempValue = objValue[node];
				} else {
					tempValue = row[node];
				}
				if (typeof tempValue !== "object") {
					return tempValue;
				} else {
					objValue = tempValue;
				}
			}
			return null;
		},
		queryParams(data) {
			let queryParams = {};
			if(!data){
				data ={};
			}
			if(this.storeParams){
				Object.assign(data, this.storeParams);
			}

			//先引入搜索组件参数
			if (this.search && this.refs && this.refs[this.search]) {
				queryParams = Object.assign(queryParams, this.refs[this.search].searchParams());
			}
			//引入自定义参数
			if (data) {
				queryParams = Object.assign(queryParams, data);
			}
			//引入固定参数
			if (this.params) {
				let fixedParams = tool.objCopy(this.params);
				for (let key in fixedParams) {
					if(fixedParams[key]){
						if(Array.isArray(fixedParams[key])){
							if(fixedParams[key].length>0){
								if(Array.isArray(queryParams[key])&&queryParams[key].length >0){
									fixedParams[key] = fixedParams[key].filter(item=>queryParams[key].includes(item));
								}
								if(fixedParams[key].length===0){
									fixedParams[key].push("none");
								}
							}else{
								delete fixedParams[key];
							}
						}
					}else{
						delete fixedParams[key];
					}
				}
				queryParams = Object.assign(queryParams, fixedParams);
			}

			return queryParams;
		},
		async refresh(data) {
			if (this.url) {
				this.loading = true;
				if (data) {
					this.storeParams = data;
				}

				let queryParams = this.queryParams(data);

				//引入分页的参数
				if (this.pagination) {
					queryParams = Object.assign(queryParams, this.pageForm);
				}
				//释放搜索组件的loading状态
				if (this.search && this.refs && this.refs[this.search]) {
					this.refs[this.search].setLoading(true);
				}

				//请求数据加载
				let rsp = await http.post(this.url, queryParams);
				if (rsp.success) {
					await this.setTableData(rsp.data);
				} else {
					//释放搜索组件的loading状态
					if (this.search && this.refs && this.refs[this.search]) {
						this.refs[this.search].setLoading(false);
					}
					this.loading = false;
				}

				// this.loading = false;
			}

		},
		rowClassName({row, rowIndex}) {
			if (this.warningRow && row.orderWeight === 0) {
				if (rowIndex % 2 === 0) {
					return "rowClassWarning"
				} else {
					return "rowClassWarning";
				}
			}
			return "";
		},
		 //columnClick(column,row) {
		  // this.$emit('columnClick',column.click,row);
		 //},
		formatter(row, column, cellValue) {
			for (const item of this.columns) {
				if (item.property === column.property) {
          let formatValue = ""+cellValue;
					if (item.click) {
						if (item.fixedValue) {
							cellValue = item.fixedValue;
              formatValue =  item.fixedValue;
						} else {
							if (item.formatter) {
								if (item.formatter instanceof Function) {
									cellValue = item.formatter(row, cellValue, this);
                  formatValue =  item.formatter(row, cellValue, this);
								} else if (row["_" + item.property]) {
									cellValue = this.formatLabels[row["_" + item.property]];
                  formatValue =  this.formatLabels[row["_" + item.property]];
								} else {
									cellValue = tool.format.convert(cellValue, item.formatter, item.key);
                  formatValue =   tool.format.convert(cellValue, item.formatter, item.key);
								}
							}

						}

						let children = [];
						if(Array.isArray(item.click)){
							item.click.forEach((click, index) => {
								let hasPermission = false;
								if(click.permission){
									this.btnPermissions.map((val) => {
										if(val===this.menuCode+click.permission){
											hasPermission = true;
										}
									});
								}else{
									hasPermission = true;
								}
								if(hasPermission){
									let elBtn = h(ElButton, {
										link: true,
										type: 'primary',
										icon:click.icon,
										style: "",
										size: 'small',
										class:click.class,
										["onClick"]: () => {
											this.$emit('columnClick', click.event, row);
										}
									}, () => click.label)
									children.push(elBtn);
								}
							});
						}else if(typeof(item.click)==='object'){
              let click = item.click;
                let hasPermission = false;
                if(click.permission){
                  this.btnPermissions.map((val) => {
                    if(val===this.menuCode+click.permission){
                      hasPermission = true;
                    }
                  });
                }else{
                  hasPermission = true;
                }
                if(hasPermission){
                  let elBtnChildren = [];
                  elBtnChildren.push(formatValue);

                  if(click.icon){
                    let icon = h(ElButton, {
                      link: true,
                      icon: click.icon,
                      size: 'small',
                      style: {margin: 'auto'},
                    });
                    let icon1 = h('i', {
                      class: click.icon
                    });
                    elBtnChildren.push(icon);
                  }

                  let elBtn = h(ElButton, {
                    link: true,
                    type: 'primary',
                    style: {margin: 'auto'},
                    size: 'small',
                    ["onClick"]: () => {
                      this.$emit('columnClick', click.event, row);
                    }
                  }, () => elBtnChildren);
                  children.push(elBtn);
                }
            }else{
              //当列的值为空返回
              if(!cellValue){
                return cellValue;
              }
							let clicks = item.click.split(',');
							let label = cellValue || '';
							let labels;
							if(label.type){
								labels=[];
								labels.push(label)
							}else{
								labels = label.split(',');
							}

							let permissions = [];
							if (item.permissions) {
								permissions = item.permissions.split(',');
							}

							clicks.forEach((click, index) => {
								let elBtn = h(ElButton, {
									link: true,
									type: 'primary',
									icon:click.icon,
									style: {margin: 'auto'},
									size: 'small',
									["onClick"]: () => {
										this.$emit('columnClick', click, row);
									}
								}, () => labels[index])
								if (permissions.length > 0) {
									if (permissions.filter(item => item === click).length > 0) {
										children.push(elBtn);
									}
								} else {
									children.push(elBtn);
								}
							});
						}
						// cellValue = h(ElButton,{link:true,type:'primary',size:'small',["onClick"]:()=>{ this.$emit('columnClick',item.click,row);}},()=>label);
						cellValue = h(ElForm, {key: tool.uuid("elk"),style: "color:transparent;background-color: transparent;border: transparent;border-color: transparent;"}, () => children);
					} else {
						if (item.formatter) {
							if (item.formatter instanceof Function) {
								cellValue = item.formatter(row, cellValue, this);
							} else if (row["_" + item.property]) {
								cellValue = this.formatLabels[row["_" + item.property]];
							} else {
								cellValue = tool.format.convert(cellValue, item.formatter, item.key);
							}
						}
					}
				}
			}
			return cellValue;
		},
	}
}
</script>

<style>


.popSettingClass {
	width: 150px;
	overflow: auto;
}

.divtable .el-table{
	--el-table-bg-color:none;
	--el-tabl-tr-bg-color:none;
	overflow: auto;
}
.el-table{
	border-collapse: collapse;
	border-color: rgba(0, 0, 0, .08) !important;
}
.el-table th{
	background-color:#F1F1F1 !important;
	border-color: rgba(0, 0, 0, .08) !important;
}
.el-table td{
	border-color: rgba(0, 0, 0, .08) !important;
}
/*表格头部的字体和大小样式 */
.el-table th div,.el-table th span{
	font-size: 11px;
	font-family: PingFangSC-Regular;

}
/*表格内容的字体和大小样式 */
.el-table td span,.el-table td div{
	font-size: 14px;
	font-family:PingFangSC-Regular;
	font-weight: 400 !important;
}

.el-table td .el-button.is-link span{
	font-size: 13px;
	margin-left: 0px;
}

.el-table td .el-button.is-link .el-icon,.el-table td .el-button.is-link .el-icon svg {
    height: 1.1em !important;
    width: 1.1em !important;
	color: rgb(78, 89, 105);
}

.el-table td .el-button.is-link:hover .el-icon,.el-table td .el-button.is-link:hover .el-icon svg {
	color: #fff
}

.el-table td .el-tag {
border-width: 0px;
padding-left: 9px;
padding-right: 9px;
}

.el-table td .el-tag span{
	font-size: 12px;
}

.el-table th div.cell{
	text-align: center;
	color: rgba(51, 51, 51, 1);
	font-size: 12.5px;
	font-weight: NaN;
	font-weight: 500;
	padding: 2px 5px;
}
.el-table td div.cell{
	padding: 0px 8px;
}

.divtable .el-table .el-table__row .el-button:hover .el-tag {
	border-color: #427CFF !important;

}

.divtable .el-table .el-table__row .el-button.is-link:has(.el-icon) {
	/*background-color: rgb(242, 243, 245);*/
}

.el-table__row--striped{
	background-color: rgba(0, 0, 0, 0.04) !important;
}


.el-table .rowClassWarning {
	color: rgb(255, 94, 94);
}
.el-table__empty-block{
	display: none;
}
.el-table .el-table__body-wrapper {
    background: #fff !important;
}

.el-pagination{
	background-color: #f6f6f6;
}
.statusclass{
	background-color: red;
}
.divtable .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell,.divtable .el-table--enable-row-transition .el-table__body td.el-table__cell  {
	background: none !important;
}


.divtable .el-checkbox .el-checkbox__inner {
	border-color: #919090 !important;
}

.divtable .el-checkbox .is-checked .el-checkbox__inner {
	border-color: #409eff !important;
}
/* 去掉鼠标悬停时的表格行颜色 */
.divtable .el-table .el-table__row:hover {
/*background-color: #DAE4FD !important;*/
	/*background-color:#EDEDED !important;*/
	background-color: rgba(0, 0, 0, 0.1) !important;
}

.divtable .el-table .el-table__row:hover .tablecode:hover{
	/*background-color: #DAE4FD !important;*/
	background-color:#427CFF !important;
}
.divtable .el-table .el-table__row:hover .tablecode:hover span{
	color:#fff !important;
}

.divtable .el-table .el-table__row:hover .tablecode:hover .is-link:hover {
	background-color: none !important;
	color: #fff;
	border-radius: 0px;
}
.divtable .el-table .el-table__row .tablecode .is-link span:hover {
	background-color: none !important;
}
.divtable .el-table .el-table__row:hover .tablecode:hover .is-link:hover span {
	background-color: none !important;
}
.el-button.is-link span:active,.el-button.is-link span:link {
	color: #fff !important;
}

/*表格滚动条*/
/*滚动条*/
.divtable .el-scrollbar {
	overflow: hidden;
	position: relative;
	height: 100%;
	--el-scrollbar-opacity: 0.8;
	--el-scrollbar-bg-color: var(--el-text-color-secondary);
	--el-scrollbar-hover-opacity: 1.0;
	--el-scrollbar-hover-bg-color: var(--el-text-color-secondary);
	outline: none;
	direction: ltr;
}
.divtable .el-scrollbar .el-scrollbar__wrap{
	scrollbar-width:auto !important;
	scrollbar-color: rgba(193,193,193,1) rgba(241,241,241,1);
	overflow: auto;
}
.divtable .el-scrollbar .el-scrollbar__bar.is-horizontal {
    height: 12px !important;
    left: 2px !important;
}
.divtable .el-scrollbar .el-scrollbar__bar.is-vertical {
	width: 12px;
    top: 2px;
}


 .divtable .el-scrollbar__bar{
	scrollbar-width:auto !important;
}

.divtable .el-scrollbar  .el-scrollbar__thumb{
	scrollbar-width:auto !important;
}

.divtable  .el-scrollbar__wrap--hidden-default {
 scrollbar-width: block !important;
}

.sytable .divtable .el-scrollbar .el-scrollbar__wrap {
	overflow:hidden !important;
}

.tablesummary{
	height: 30px;
    margin: 0px 0px 5px;
    padding: 5px 10px 5px 0px;
    border: 1px solid rgba(231, 228, 228, 0.69);
	background-color: #f6f6f6;
	float: left;
	border-right: 0px solid #f6f6f6;
}

.document-detail-table .el-table th div,.document-detail-table .el-table th span{
	font-weight: 500 !important;
}

.document-detail-table .el-table th{
	background-color: #fff !important;
}


.todolist .el-table--border .el-table__cell {
	border-right-width: 0px;
}

.todolist .el-table__header{
	display: none;
}
.el-table td.el-table__cell .el-container .is-link{
	/*margin-left: 0px !important;*/
}


.todolist .el-table td span,.todolist .el-table td div{
	font-size: 13px;
}
.todolist .el-table td .el-button.is-link span{
	font-size: 13px;
	color: rgb(96, 98, 102);
}
.todolist .el-table td .el-button.is-link span:hover{
	color: #fff;
}

</style>
